<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Desk</title>
    <script src="../assets/js/jquery-3.3.1.js"></script>
    <link href="../assets/css/bulma.min.css" rel="stylesheet">
    <style type="text/css">

        .t-turn {
            width: 30px;
        }

        .t-bet {
            width: 50px;
        }

        .t-status {
            width: 50px;
        }

        .t-role {
            width: 50px;
        }

        .t-hand {
            width: 300px;
        }

        .t-name {
            width: 80px;
        }

        .h {
            width: 45px;
            height: 60px;
            margin-right: 5px;
        }

        .field {
            margin-top: 20px;
        }

        .button {
            margin-right: 15px;
        }

        .img-poker {
            width: 90px;
            height: 120px;
            margin-right: 10px;
        }

        .table {
            margin-top: 20px;
        }

    </style>
</head>
<body>

<br/>
<h1>用户:{{.user}}</h1>
<br/>

<div class="columns">
    <div class="column"></div>
    <div class="column is-half">
        <div>
            <a class="button is-link" onclick="fold()">Flod</a>
            <a class="button is-link" onclick="check()">Check</a>
            <a class="button is-link" onclick="allin()">All-in</a>
            <a class="button is-link" onclick="call()">Call</a>
            <a class="button is-link" id="btn-ready" onclick="ready()">Ready</a>
        </div>
        <div class="field has-addons">
            <div class="control">
                <input id="betValue" class="input" type="number" value="0">
            </div>
            <div class="control">
                <a class="button is-info" onclick="bet()">
                    下注
                </a>
            </div>
            <text id="bet"></text>
        </div>
    </div>
    <div class="column"></div>
</div>

<hr/>

<div class="columns">
    <div class="column"></div>
    <div class="column is-half">

        <div>
            池底:<span id="poolValue">0</span>
        </div>

        <span class="desk">
            <img class="img-poker" id="p1"
                 src="data:image/svg+xml;charset=utf-8,%3Csvg%20width=%2290%22%20height=%22120%22%20xmlns=%22http://www.w3.org/2000/svg%22%20viewbox=%220%200%2090%20120%22%20preserveaspectratio=%22none%22%3E%3Cg%20id=%22holder_165714e688d%22%3E%3Crect%20width=%2290%22%20height=%22120%22%20fill=%22#777%22%3E%3C/rect%3E%3C/g%3E%3C/svg%3E">
            <img class="img-poker" id="p2"
                 src="data:image/svg+xml;charset=utf-8,%3Csvg%20width=%2290%22%20height=%22120%22%20xmlns=%22http://www.w3.org/2000/svg%22%20viewbox=%220%200%2090%20120%22%20preserveaspectratio=%22none%22%3E%3Cg%20id=%22holder_165714e688d%22%3E%3Crect%20width=%2290%22%20height=%22120%22%20fill=%22#777%22%3E%3C/rect%3E%3C/g%3E%3C/svg%3E">
            <img class="img-poker" id="p3"
                 src="data:image/svg+xml;charset=utf-8,%3Csvg%20width=%2290%22%20height=%22120%22%20xmlns=%22http://www.w3.org/2000/svg%22%20viewbox=%220%200%2090%20120%22%20preserveaspectratio=%22none%22%3E%3Cg%20id=%22holder_165714e688d%22%3E%3Crect%20width=%2290%22%20height=%22120%22%20fill=%22#777%22%3E%3C/rect%3E%3C/g%3E%3C/svg%3E">
            <img class="img-poker" id="p4"
                 src="data:image/svg+xml;charset=utf-8,%3Csvg%20width=%2290%22%20height=%22120%22%20xmlns=%22http://www.w3.org/2000/svg%22%20viewbox=%220%200%2090%20120%22%20preserveaspectratio=%22none%22%3E%3Cg%20id=%22holder_165714e688d%22%3E%3Crect%20width=%2290%22%20height=%22120%22%20fill=%22#777%22%3E%3C/rect%3E%3C/g%3E%3C/svg%3E">
            <img class="img-poker" id="p5"
                 src="data:image/svg+xml;charset=utf-8,%3Csvg%20width=%2290%22%20height=%22120%22%20xmlns=%22http://www.w3.org/2000/svg%22%20viewbox=%220%200%2090%20120%22%20preserveaspectratio=%22none%22%3E%3Cg%20id=%22holder_165714e688d%22%3E%3Crect%20width=%2290%22%20height=%22120%22%20fill=%22#777%22%3E%3C/rect%3E%3C/g%3E%3C/svg%3E">
        </span>

        <table class="table is-bordered">
            <thead>
            <tr>
                <th class="t-turn">Action</th>
                <th class="t-name">Name</th>
                <th class="t-total">Total</th>
                <th class="t-bet">Bet</th>
                <th class="t-status">Status</th>
                <th class="t-role">Role</th>
                <th class="t-hand">Hand</th>
            </tr>
            </thead>
            <tbody id="seat-body">

            </tbody>
        </table>
    </div>
    <div class="column"></div>
</div>

<script type="application/javascript">
    $(function () {
        console.log("windows.onload")
        openConn()
    })

    $(window).on('beforeunload', function () {
        console.log("beforeunload")
    });

    $(window).on("unload", function (e) {
        disconn()
    });


    var token ={{.token}}
    var user ={{.user}}

    var ws
    var turn;//actoin
    var lastBet = 0;//上家下注
    var mybet = 0;//本轮自己下注
    var totalBet = 0;//自己总筹码

    function openConn() {
        ws = new WebSocket("ws://localhost:8080/socket");
        // 连接打开时触发
        ws.onopen = function (evt) {
            console.log("Connection open ...");
            connect(ws)
        };
        // 接收到消息时触发
        ws.onmessage = handleMessage

        // 连接关闭时触发
        ws.onclose = function (evt) {
            console.log("Connection closed.");
        };
    }

    function disconn() {
        console.log("disconn")
        if (ws) {
            ws.close()
            ws = null
        }
    }

    function connect(ws) {
        console.log("connect...")
        var msgLogin = {
            type: "connect",
            people: {
                token: token
            }
        }

        ws.send(JSON.stringify(msgLogin));
    }

    function ready() {
        if (ws) {
            var ready = {
                type: "ready"
            }
            ws.send(JSON.stringify(ready));
        }

        $(".img-poker").attr("src", "data:image/svg+xml;charset=utf-8,%3Csvg%20width=%2290%22%20height=%22120%22%20xmlns=%22http://www.w3.org/2000/svg%22%20viewbox=%220%200%2090%20120%22%20preserveaspectratio=%22none%22%3E%3Cg%20id=%22holder_165714e688d%22%3E%3Crect%20width=%2290%22%20height=%22120%22%20fill=%22#777%22%3E%3C/rect%3E%3C/g%3E%3C/svg%3E")
        $(".h").attr("src", "data:image/svg+xml;charset=utf-8,%3Csvg%20width=%2245%22%20height=%2260%22%20xmlns=%22http://www.w3.org/2000/svg%22%20viewbox=%220%200%2045%2060%22%20preserveaspectratio=%22none%22%3E%3Cg%20id=%22holder_165714e688d%22%3E%3Crect%20width=%2245%22%20height=%2260%22%20fill=%22#777%22%3E%3C/rect%3E%3C/g%3E%3C/svg%3E")
    }

    function fold() {
        var bet = {
            type: "bet",
            bet: {
                value: -1,
            },
        }
        sendBet(bet)
    }

    function call() {
        console.log("lastBet", lastBet)
        $("#bet").text(lastBet.toString())
        var bet = {
            type: "bet",
            bet: {
                value: lastBet,
            },
        }
        sendBet(bet)
    }

    function check() {
        if (mybet == lastBet) {
            call()
            return
        }
        if (lastBet > 0) {
            alert("请下注")
            return
        }
        if (user == turn) {
            if (ws) {
                var check = {
                    type: "bet",
                    bet: {
                        value: 0,
                    },
                }
                ws.send(JSON.stringify(check));
                turn = null
            }
        } else {
            alert("没有轮到你操作")
        }
    }

    function allin() {
        var bet = {
            type: "bet",
            bet: {
                value: totalBet,
            },
        }
        sendBet(bet)
    }

    function bet() {
        var v = parseInt($("#betValue").val());
        $("#betValue").val(0)
        mybet += v
        if (lastBet > 0 && mybet < lastBet) {
            alert("下注值必须大于等于上家")
        } else {
            var bet = {
                type: "bet",
                bet: {
                    value: mybet,
                },
            }
            sendBet(bet)
        }
    }

    function sendBet(bet) {
        if (user == turn) {
            if (ws) {
                turn = null
                ws.send(JSON.stringify(bet));
            }
        } else {
            alert("没有轮到你操作")
        }
    }

    function reset() {
        turn = "";//actoin
        lastBet = 0;//上家下注
        mybet = 0;//本轮下注
        totalBet = 0;//总筹码
        $("#btn-ready").show()
    }

    //处理消息
    function handleMessage(evt) {
        let {type, msg} = JSON.parse(evt.data)

        console.log(type, msg)

        switch (type) {
            case "online":
                online(msg)
                break;
            case "offline":
                offline(msg)
                break;
            case "ready":
                playerReady(msg)
                break;
            case "allready":
                allready(msg)
                break;
            case "betAndNext":
                betAndNext(msg)
                break;
            case "poolcard": {
                poolCard(msg)
            }
                break;
            case "showdown": {
                showdown(msg)
            }
                break;
            case "err": {
                alert(msg)
            }
                break;

        }
    }

    function online(msg) {
        let {name: n, index: mIndex} = msg

        let insert = false;
        let line = "<tr id=l-" + n + " data-index=" + mIndex + ">" +
                "<td class='t' id=t-" + n + "></td>" +
                "<td id=n-" + n + ">" + n + "</td>" +
                "<td class='total' id=total-" + n + "></td>" +
                "<td class='b' id=b-" + n + "></td>" +
                "<td id=s-" + n + "></td>" +
                "<td id=r-" + n + "></td>" +
                "<td class='c' id=c-" + n + ">" +
                "<img class='h' id='h1-" + n + "' src='data:image/svg+xml;charset=utf-8,%3Csvg%20width=%2245%22%20height=%2260%22%20xmlns=%22http://www.w3.org/2000/svg%22%20viewbox=%220%200%2045%2060%22%20preserveaspectratio=%22none%22%3E%3Cg%20id=%22holder_165714e688d%22%3E%3Crect%20width=%2245%22%20height=%2260%22%20fill=%22#777%22%3E%3C/rect%3E%3C/g%3E%3C/svg%3E' /> " +
                "<img class='h' id='h2-" + n + "' src='data:image/svg+xml;charset=utf-8,%3Csvg%20width=%2245%22%20height=%2260%22%20xmlns=%22http://www.w3.org/2000/svg%22%20viewbox=%220%200%2045%2060%22%20preserveaspectratio=%22none%22%3E%3Cg%20id=%22holder_165714e688d%22%3E%3Crect%20width=%2245%22%20height=%2260%22%20fill=%22#777%22%3E%3C/rect%3E%3C/g%3E%3C/svg%3E' /> " +
                "</td>" +
                "</tr>";

        let children = $("#seat-body").children();
        for (let i = 0; i < children.length; i++) {
            let index = $(children[i]).data("index")
            if (index > mIndex) {
                $(line).insertBefore(children[i]);
                insert = true;
                break;
            }
        }
        if (!insert) {
            $("#seat-body").append(line);
        }

        if (n == user) {
            $("#l-" + n).addClass("is-selected")
        }
    }

    function offline(msg) {
        $("#l-" + msg.name).remove()
    }

    function playerReady(msg) {
        let {name, ready, total} = msg

        if (ready) {
            if (name == user) {
                $("#btn-ready").hide()
                totalBet = total
            }
            $("#s-" + name).text("ready")
            $("#total-" + name).text(total)
        } else {
            $("#s-" + name).text("")
            totalBet = 0
        }
    }

    function allready(msg) {
        let {btn, sb, bb, bet, cards} = msg
        turn = msg.turn
        lastBet = bet

        $("#r-" + btn).text("D")
        $("#r-" + sb).text("SB")
        $("#b-" + sb).text(bet / 2)
        $("#r-" + bb).text("BB")
        $("#b-" + bb).text(bet)
        $(".t").text("")
        $("#t-" + turn).text(">")

        $("#total-" + sb).text(totalBet - bet / 2)
        $("#total-" + bb).text(totalBet - bet)

        switch (user) {
            case sb: {
                mybet = bet / 2
                totalBet -= mybet
                $("#bet").text(mybet)
            }
                break;
            case bb: {
                mybet = bet
                totalBet -= mybet
                $("#bet").text(mybet)
            }
                break;
        }

        $("#h1-" + user).attr("src", getCardSrc(cards[0]))
        $("#h2-" + user).attr("src", getCardSrc(cards[1]))
    }

    function betAndNext(msg) {////-1 fold, 0 check, 1 raise, 2 allin
        let {name, bet, type} = msg

        turn = msg.turn
        if (name == user) {
            mybet = bet
            $("#bet").text(mybet.toString())
            totalBet = msg.total
        }

        $("#total-" + name).text(msg.total)
        $(".t").text("")
        if ("" != turn) {
            $("#t-" + turn).text(">")
        }

        let status = ""
        switch (type) {
            case -1:
                status = "弃牌"
                break;
            case 0:
                status = "check"
                break;
            case 1:  //raise
                status = "加注"
                break;
            case 2:  //allin
                status = "All-in"
                break;
            case 3:
                status = "跟注"
                break;
        }

        $("#s-" + name).text(status)
        if (-1 != type) {
            $("#b-" + name).text(bet)
            if (bet > lastBet) {
                lastBet = bet
            }
        }
    }

    function poolCard(msg) {
        let {pot, cards, betTurn} = msg

        switch (betTurn) {
            case 0: {
                $("#p1").attr("src", getCardSrc(cards[0]))
                $("#p2").attr("src", getCardSrc(cards[1]))
                $("#p3").attr("src", getCardSrc(cards[2]))
            }
                break;
            case 1: {
                $("#p4").attr("src", getCardSrc(cards[0]))
            }
                break;
            case 2: {
                $("#p5").attr("src", getCardSrc(cards[0]))
            }
                break;
        }

        turn = msg.turn

        lastBet = 0
        mybet = 0
        $("#bet").text("")
        $(".b").text("")
        $(".t").text("")
        $("#poolValue").text(pot)
        $("bet").text("0")
        if ("" != turn) {
            $("#t-" + turn).text(">")
        }

    }

    function showdown(msg) {
        let {names, cardType} = msg
        console.log(names, cardType)

        alert("winner:" + names + "(" + cardType + ")")
        reset()
    }

    function getCardSrc(card) {
        let imgUrl = "../assets/img/poker/pkp_";
        switch (card.varieties) {
            case 0: {
                imgUrl += "s_"
            }
                break;
            case 1: {
                imgUrl += "h_"
            }
                break;
            case 2: {
                imgUrl += "c_"
            }
                break;
            case 3: {
                imgUrl += "d_"
            }
                break;
        }
        imgUrl = imgUrl + card.number + ".jpg";
        return imgUrl
    }

    function getSvg(width, height) {

    }
</script>


</body>
</html>